<template>
  <div id="detail_store_goods_in">
    <div class="noticeOut">
      <h1>查看出库商品面板</h1>
      <div class="btns">
        <el-button @click="outGoodsBtn" style="width: 200px;height: 100px;background-color: #c09dff">出库货架商品
        </el-button>
        <el-button @click="outUntreated" style="width: 200px;height: 100px;background-color: #c09dff">过期/下架商品
        </el-button>
      </div>
    </div>
    <!--商品上货架-->
    <el-dialog :fullscreen="true" :visible.sync="visable1">
      <div class="searchForm">
        <div class="column">
          <span>商品名：</span>
          <el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm.name"/>
        </div>
        <div class="column">
          <el-button type="success" @click="submitSearchForm">搜索</el-button>
          <el-button type="primary" @click="visable1 = false">关闭</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%;" size="medium">
          <el-table-column width="200" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="coverUrl" label="封面">
            <template v-slot="scope">
              <img height="60px" :src="scope.row.coverUrl">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名">
          </el-table-column>
          <el-table-column prop="goodsNum" label="出货数量">
          </el-table-column>
          <el-table-column width="100px" label="操作">
            <template v-slot="scope">
              <el-button type="warning" @click="outGoodsBtn1(scope.row)" plain>出货
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0 15px 0;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page.sync="searchForm.currentPage" :page-sizes="[5, 10, 20, 50]"
                         :page-size="searchForm.pageSize"
                         layout="total,sizes, prev, pager, next,jumper" :total="searchForm.total">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
    <!--商品出库-->
    <el-dialog title="商品出库" :visible.sync="goodsOutVisable" width="50%">
      <el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
               class="demo-ruleForm">
        <el-form-item style="width:40%" label="商品：" prop="goodsId">
          <el-select disabled v-model="selectGoods.goodsId" placeholder="请选择商品" filterable clearable>
            <el-option v-for="item in options_goods" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width:40%" label="仓库：" prop="storeId">
          <el-select v-model="selectGoods.storeId" @change="$forceUpdate" placeholder="请选择仓库" filterable clearable>
            <el-option v-for="item in options_store" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width:40%" label="类型：" prop="state">
          <el-select v-model="selectGoods.state" @change="$forceUpdate()" filterable placeholder="请选择类型" clearable>
            <el-option label="出库" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width:40%">
          <el-button type="success" @click="selectedGoods('selectGoods')" plain>确定</el-button>
          <el-button type="warning" @click="closeSelectedGoods('selectGoods')" plain>关闭</el-button>
        </el-form-item>
      </el-form>
      <el-form size="mini" v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
               class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 60%" label="商品名：">
              <el-input readonly v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width:60%" label="类型：" prop="state">
              <el-select disabled v-model="newForm.state" filterable @change="$forceUpdate()" placeholder="请选择类型"
                         clearable>
                <el-option label="出库" value="0"></el-option>
                <el-option label="过期" value="1"></el-option>
                <el-option label="下架" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 60%" label="商品数量：" prop="goodsNum">
              <el-input type="number" @change="() => {
                if (this.goodsNum_max < this.newForm.goodsNum) {
                  this.newForm.goodsNum = this.goodsNum_max
                }
                if (this.newForm.goodsNum < 1) {
                  this.newForm.goodsNum = 1
                }

              }" min="1" :max="goodsNum_max" v-model="newForm.goodsNum" placeholder="如：1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width:60%" label="仓库：" prop="storeId">
              <el-select disabled v-model="newForm.storeId" placeholder="请选择仓库" filterable clearable>
                <el-option v-for="item in options_store" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 60%" label="出库日期：" prop="createTime">
              <el-date-picker size="mini" style="width: 140px" value-format="yyyy-MM-dd" v-model="newForm.createTime"
                              type="date" placeholder="出库日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 60%" label="备注：">
              <el-input type="textarea" v-model="newForm.info" placeholder="如：某商品因什么原因出库"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitNewForm('newForm')">出库</el-button>
          <el-button @click="saveCancel('newForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--商品过期/下架列表显示-->
    <el-dialog :fullscreen="true" :visible.sync="visable2">
      <div class="searchForm">
        <div class="column">
          <span>商品名：</span>
          <el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm1.name"/>
        </div>
        <div class="column">
          <span>类型：</span>
          <el-select style="width: 120px" v-model="searchForm1.state" @change="$forceUpdate()" placeholder="请选择类型"
                     clearable>
            <el-option label="过期" value="1"></el-option>
            <el-option label="下架" value="2"></el-option>
          </el-select>
        </div>
        <div class="column">
          <el-button type="success" @click="submitSearchForm1">搜索</el-button>
          <el-button type="primary" @click="visable2 = false">关闭</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData1" style="width: 100%;" size="medium">
          <el-table-column width="200" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="coverUrl" label="封面">
            <template v-slot="scope">
              <img height="60px" :src="scope.row.coverUrl">
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名">
          </el-table-column>
          <el-table-column prop="storeName" label="仓库">
          </el-table-column>
          <el-table-column prop="untreatedNum" label="处理数量">
          </el-table-column>
          <el-table-column prop="state" label="类型">
            <template v-slot="scope">
              <el-tag type="warning" v-if="scope.row.state == '1'">过期</el-tag>
              <el-tag type="danger" v-if="scope.row.state == '2'">下架</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="通知时间">
          </el-table-column>
          <el-table-column width="100px" label="操作">
            <template v-slot="scope">
              <el-button type="warning" @click="outUntreatedBtn(scope.row)" plain>处理
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <div style="margin: 10px 0 15px 0;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page.sync="searchForm1.currentPage" :page-sizes="[5, 10, 20, 50]"
                         :page-size="searchForm1.pageSize"
                         layout="total,sizes, prev, pager, next,jumper" :total="searchForm1.total">
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!--处理表单填写-->
    <el-dialog title="过期/下架商品处理表单" :visible.sync="visable3" width="50%">
      <el-form v-if="" :model="outUntreatedForm" :rules="rules" ref="outUntreatedForm" label-width="100px"
               class="demo-ruleForm">
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 60%">
              <img height="200px" :src="outUntreatedForm.coverUrl" alt="商品图片"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 60%" label="商品名称:">
              <el-input readonly v-model="outUntreatedForm.goodsName" placeholder="商品名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="width: 60%" label="商品数量:" prop="untreatedNum">
              <el-input @change="() => {
                if (outUntreatedForm.untreatedNum <= 0) {
                  outUntreatedForm.untreatedNum = 1
                }
                if (outUntreatedForm.untreatedNum > untreatedNum) {
                  outUntreatedForm.untreatedNum = untreatedNum
                }
              }" :placeholder="'如：' + untreatedNum" type="number" min="1" :max="untreatedNum"
                        v-model="outUntreatedForm.untreatedNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="width: 60%" label="仓库:">
              <el-input readonly v-model="outUntreatedForm.storeName" placeholder="仓库"/>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item style="width: 40%" label="类型:">
              <el-select disabled v-model="outUntreatedForm.state" @change="$forceUpdate()" placeholder="请选择类型"
                         clearable>
                <el-option label="过期" value="1"></el-option>
                <el-option label="下架" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 60%">
              <el-button type="success" @click="submitOutUntreatedForm('outUntreatedForm')">处理</el-button>
              <el-button type="primary" @click="closeOutUntreatedForm('outUntreatedForm')">关闭</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import {popup} from "@/utils/popup";
import {
  queryPageNoticeOut_shelves,
  queryPageNoticeOut_untreated, resolveOutUntreatedForm,
  saveOut_shelves
} from "@/api/inventory/noticeApi";
import {
  changeOutGoods,
  initOutOptions, queryOutGoods
} from "@/api/inventory/stockGoodsDetailApi";

export default {
  data() {
    return {
      visable1: false,
      visable2: false,
      visable3: false,
      untreatedNum: '',
      outUntreatedForm: {},
      goodsOutVisable: false,
      newVisable: false,
      selectGoodsVisable: true,
      selectGoods: {},
      options_goods: [],
      options_store: [],
      /*表格*/
      tableData: [],
      searchForm: {
        total: 0,
        currentPage: 1,
        pageSize: 5,
        state: '0'
      },
      searchForm1: {
        total: 0,
        currentPage: 1,
        pageSize: 5,
      },
      tableData1: [],
      newForm: {
        goodsId: '',
        goodsNum: '',
        goodsName: '',
        info: '',
        createTime: '',
        storeId: '',
        state: ''
      },
      rules: {
        goodsId: [
          {required: true, message: '商品编号不能为空', trigger: 'blur'},
        ],
        storeId: [
          {required: true, message: '仓库编号不能为空', trigger: 'blur'},
        ],
        state: [
          {required: true, message: '类型不能为空', trigger: 'blur'},
        ],
        goodsNum: [
          {required: true, message: '出库数量不能为空', trigger: 'blur'},
        ],
        untreatedNum: [
          {required: true, message: '处理数量不能为空', trigger: 'blur'},
        ],
        createTime: [
          {required: true, message: '出库日期不能为空', trigger: 'blur'},
        ]
      },
    }
  },
  methods: {
    outGoodsBtn() {
      this.init()
      this.visable1 = true
    },
    closeOutUntreatedForm(formName) {
      this.$refs[formName].resetFields()
      this.visable3 = false
      this.outUntreatedForm = {}
    },
    outGoodsBtn1(row) {
      this.selectGoods.goodsId = row.id
      var flag = false;
      for (var item of this.options_goods) {
        if (item.id == this.selectGoods.goodsId) {
          flag = true;
        }

      }
      if (!flag) {
        popup("库存中没有该商品的库存", "error")
        return;
      }
      changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
        if (res.code === 200) {
          this.options_store = res.data
        }
      })
      this.goodsOutVisable = true
      this.selectGoodsVisable = true
      this.newVisable = false
      this.selectGoods.state = '0'
      this.goodsNum_max = row.goodsNum
      this.newForm = {
        goodsId: '',
        goodsNum: row.goodsNum,
        goodsName: '',
        info: '',
        createTime: '',
        storeId: '',
        state: ''
      }

    },
    outUntreatedBtn(param) {
      this.outUntreatedForm = {...param}
      this.untreatedNum = param.untreatedNum
      this.visable3 = true
    },
    submitOutUntreatedForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          resolveOutUntreatedForm(this.outUntreatedForm).then(res => {
            if (res.code === 200) {
                popup("处理成功")
                this.visable3 = false
                this.outUntreatedForm = {}
                this.init1()
              }
            }
          )
        }
      })

    },
    outUntreated() {
      this.init1()
      this.visable2 = true
    },
    changeGoods() {
      this.$forceUpdate()
      changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
        res.msg
        if (res.code === 200) {
          this.options_store = res.data
        }
      })
    },
    initOptions() {
      initOutOptions().then(res => {
        res.msg
        if (res.code === 200) {
          this.options_goods = res.data.goods
          this.options_store = res.data.stores

        }
      })
    },
    init() {
      queryPageNoticeOut_shelves(this.searchForm).then(res => {
        res.msg
        if (res.code === 200) {
          this.tableData = res.data.records
          this.searchForm.total = res.data.total
          this.searchForm.pageSize = res.data.size
          this.searchForm.currentPage = res.data.current
        } else {
          popup(res.msg, "error")
        }
      })
    },
    /*分页*/
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.init()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchForm.currentPage = val
      this.init()
      console.log(`当前页: ${val}`);
    },
    submitSearchForm() {
      this.init()
    },
    /*过期、下架分页*/
    init1() {
      queryPageNoticeOut_untreated(this.searchForm1).then(res => {
        res.msg
        if (res.code === 200) {
          this.tableData1 = res.data.records
          this.searchForm1.total = res.data.total
          this.searchForm1.pageSize = res.data.size
          this.searchForm1.currentPage = res.data.current
        }
      })
    },
    handleSizeChange1(val) {
      this.searchForm1.pageSize = val
      this.init1()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      this.searchForm1.currentPage = val
      this.init1()
      console.log(`当前页: ${val}`);
    },
    submitSearchForm1() {
      this.init1()
    },
    selectedGoods(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          queryOutGoods(this.selectGoods).then(res => {
            if (res.code === 200) {
              this.selectGoodsVisable = false
              this.newVisable = true
              this.newForm.goodsName = res.data.goodsName
              this.newForm.state = this.selectGoods.state
              this.newForm.storeId = this.selectGoods.storeId
              this.newForm.goodsId = this.selectGoods.goodsId
            }
          })
        }
      })
    },
    closeSelectedGoods(formName) {
      this.$refs[formName].resetFields()
      this.selectGoods = {}
      this.goodsOutVisable = false


    },
    submitNewForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveOut_shelves(this.newForm).then(res => {
            if (res.code === 200) {
              popup("出库成功")
              this.searchForm.state1 = '0'
              this.goodsOutVisable = false
              this.selectGoods = {}
              this.init()
            }
          })
        }
      })
    },
    saveCancel(formName) {
      this.$refs[formName].resetFields()
      this.newVisable = false
      this.selectGoodsVisable = true
    }
  },
  mounted() {
    this.initOptions()
  }
}
</script>
<style>
#detail_store_goods_in .noticeOut {
  height: 660px;
  background-color: #bfdcf6;
}

#detail_store_goods_in .noticeOut h1,
.btns {
  width: 100%;

}

.searchForm {
  height: 134px;
}

.table {
  height: 320px;
}

.pageUtils {
  position: absolute;
  width: 84%;
  margin: 2px auto;
  height: 43px;
}

.searchForm {
  display: inline-block;
  margin: 0 auto;
  height: 51px;
  line-height: 51px;
}

.searchForm .column {
  display: inline-block;
  margin: 0 auto;
  margin-right: 2px;
  line-height: 48px;
  height: 51px;
}
</style>
